<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<head>

    <style type="text/css">
        .select-all label {
            padding-left: 4px;
            cursor: pointer;
            margin: 0;
            vertical-align: middle;
        }

        .select-all input {
            display: inline-block;
            vertical-align: middle;
            margin-bottom: 2px;
        }
    </style>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<!--任务分配调整-->
<div class="modal fade" id="modal-create">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">任务分配调整</h4>
            </div>
            <div class="modal-body">
                <form id="taskForm" class="form-horizontal" role="form">
                    <input id="oldDeptId" type="hidden">
                    <div class="form-group">
                        <label class="col-sm-2 control-label no-padding-right">原科室</label>
                        <div class="col-sm-5">
                            <input id="oldDeptName" class="form-control" readonly>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label no-padding-right">替换科室</label>
                        <div class="col-sm-5">
                            <select id="dept" class="form-control select2" style="width: 100%;" name="deptId">
                                <option value="" selected="selected">请选择</option>
                                <option th:each="dept:${depts}" th:value="${dept.id}"
                                        th:text="${dept.name}"></option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label no-padding-right">科室任务</label>
                        <div class="col-sm-5">
                            <div class="select-all" style="margin-top: 5px;">
                                <input id="chkCancel" name="chkCancel" type="checkbox" value="1">
                                <label>取消</label>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info" id="btn-save">确定</button>
            </div>
        </div>
    </div>
</div>
<!--添加任务科室-->
<div class="modal fade" id="modal-add">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">任务分配调整</h4>
            </div>
            <form id="addForm" class="form-horizontal" role="form">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-2 control-label no-padding-right">新增科室</label>
                        <div class="col-sm-5">
                            <select id="deptAdd" class="form-control select2" style="width: 100%;">
                                <option value="" selected="selected">请选择</option>
                                <option th:each="dept:${depts}" th:value="${dept.id}"
                                        th:text="${dept.name}"></option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-info" id="btn-sure">确定</button>
                </div>
            </form>
        </div>
    </div>
</div>
<section class="content-header">
    <h1>
        设计科室变更
    </h1>
</section>
<section class="content">
    <div class="row">
        <form id="sheetForm">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-header">
                        <div class="row">
                            <div class="form-inline">
                                <input type="hidden" name="proId" th:value="${id}">
                                <div class="form-group" style="margin-right: 10px;">
                                    <label>项目编号</label>
                                    <label class="form-control text-center" th:text="${code}"
                                           style="border: none; border-bottom: solid 1px #EEEEEE;width:100px;font-weight:500;"></label>
                                </div>
                                <div class="form-group" style="margin-right: 10px;">
                                    <label>项目名称</label>
                                    <label class="form-control text-center" th:text="${name}"
                                           style="border: none; border-bottom: solid 1px #EEEEEE;width:300px;font-weight:500;"></label>
                                </div>
                                <div class="form-group" style="margin-right: 10px;">
                                    <label>项目数量</label>
                                    <label class="form-control text-center" th:text="${num}"
                                           style="border: none; border-bottom: solid 1px #EEEEEE;width:100px;font-weight:500;"></label>
                                </div>
                                <div class="form-group" style="margin-right: 10px;">
                                    <label>需方</label>
                                    <label class="form-control text-center" th:text="${demander}"
                                           style="border: none; border-bottom: solid 1px #EEEEEE;width:300px;font-weight:500;"></label>
                                </div>
                                <div class="form-group" style="margin-right: 10px;">
                                    <label>安装地点</label>
                                    <label class="form-control text-center" th:text="${address}"
                                           style="border: none; border-bottom: solid 1px #EEEEEE;width:180px;font-weight:500;"></label>
                                </div>
                                <div class="form-group" style="margin-right: 10px;">
                                    <label>备注</label>
                                    <input type="text" name="comment" class="form-control text-center" th:value="${comment}"
                                           style="border: none; border-bottom: solid 1px #EEEEEE;width:400px;">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="box-body">
                        <div class="row" style="padding-left: 4%;">
                            <div class="col-lg-6">
                                <h4>调整前</h4>
                                <div th:each="p:${taskDepts}" class="callout"
                                     style="margin-top: 0px;background-color: #F0F0F0;height: 60px;">
                                    <p style="font-size: 1.5em;margin-top: 0px;" th:text="${p.name}"></p>
                                </div>
                            </div>
                            <div class="col-lg-6" id="newCon" style="padding-right: 4%;">
                                <button type="button" id="btn-add" class="btn btn-info pull-right">添加</button>
                                <h4>调整后</h4>
                                <div th:id="'newDiv_' + ${p.id}" th:each="p:${taskDepts}" class="callout"
                                     style="margin-top: 0px;background-color: #F0F0F0;height: 60px;">
                                    <button type="button"
                                            class="btn btn-warning pull-right" style="margin-top: 0px;"
                                            th:onclick="editTaskDept([[${p.id}]],[[${p.name}]]);">编辑
                                    </button>
                                    <input th:id="'old_' + ${p.id}" name="oldId" th:value="${p.id}" type="hidden">
                                    <input th:id="'new_' + ${p.id}" name="newId" th:value="${p.id}" type="hidden">
                                    <input th:id="'oldP_' + ${p.id}" th:value="${p.name}" type="hidden">
                                    <input th:id="'flg_' + ${p.id}" name="editFlg" value="1" type="hidden">
                                    <p th:id="'newP_' + ${p.id}" style="font-size: 1.5em;margin-top: 0px;"
                                       th:text="${p.name}"></p>
                                </div>
                            </div>
                        </div>
                        <div style="margin-top: 20px"
                             shiro:hasPermission="dsn:taskCha:edit">
                            <button type="button" id="btn_commit" class="btn btn-success pull-right"> 保存并提交变更</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    </div>
</section>
<div th:include="include :: footer"></div>
<script th:inline="javascript">

    function editTaskDept(id, name) {
        $('#oldDeptName').val(name);
        $('#oldDeptId').val(id);
        $("#dept").val(id).trigger("change");
        js.modal.open("modal-create")
    }

    function removeDiv(id, name) {
        $("#newDiv_" + id).remove();
    }

    $(function () {

        /** 关闭添模态框 */
        js.modal.hideEvent("modal-create", function () {
            js.reset("taskForm");
            $("#dept").removeAttr("disabled");
        });

        $("#chkCancel").change(function () {
            if ($("#chkCancel").is(":checked")) {
                $("#dept").val('').trigger("change");
                $("#dept").attr("disabled", "disabled");
            } else {
                $("#dept").removeAttr("disabled");
            }
        });

        /** 创建或编辑 */
        $("#btn-save").click(function () {
            var oldDeptId = $('#oldDeptId').val();
            var newDeptId = $('#dept option:selected').val();
            var newDeptName = $('#dept option:selected').text();

            if (!$("#chkCancel").is(":checked") && newDeptId == "") {
                js.modal.warning("请选择科室！");
                return;
            }
            var i = 0;
            $("input[name='newId']").each(function () {
                var aa = $(this).val();
                if (aa == newDeptId && newDeptId != "") {
                    i++;
                }
            })
            if (i > 0) {
                js.modal.warning("不允许重复选择分配科室！");
                return;
            }

            if ($("#chkCancel").is(":checked")) {
                $("#newDiv_" + oldDeptId).removeClass("callout-warning");
                $("#newDiv_" + oldDeptId).addClass("callout-danger");
                $("#newP_" + oldDeptId).text($("#oldP_" + oldDeptId).val() + '(取消)');
                $("#new_" + oldDeptId).val("");
            } else if (oldDeptId != newDeptId) {
                $("#newDiv_" + oldDeptId).addClass("callout-warning");
                $("#newP_" + oldDeptId).text(newDeptName + '(修改)');
                $("#new_" + oldDeptId).val(newDeptId);
            } else if (oldDeptId == newDeptId) {
                $("#newDiv_" + oldDeptId).removeClass("callout-warning");
                $("#newDiv_" + oldDeptId).removeClass("callout-danger");
                $("#newP_" + oldDeptId).text($("#oldP_" + oldDeptId).val());
                $("#new_" + oldDeptId).val(newDeptId);
            }
            js.modal.hide("modal-create");
        })

        /** 添加 */
        $("#btn-add").click(function () {
            js.modal.open("modal-add")
        })

        /** 关闭添模态框 */
        js.modal.hideEvent("modal-add", function () {
            $("#deptAdd").val('').trigger("change");
        });

        /** 创建或编辑 */
        $("#btn-sure").click(function () {

            var deptId = $('#deptAdd option:selected').val();
            var deptName = $('#deptAdd option:selected').text();
            // 校验
            if (deptId == "") {
                js.modal.warning("请选择待添加科室！");
                return;
            }
            var i = 0;
            $("input[name='newId']").each(function () {
                var aa = $(this).val();
                if (aa == deptId) {
                    i++;
                }
            })
            if (i > 0) {
                js.modal.warning("不允许重复选择分配科室！");
                return;
            }

            //添加新科室
            $("#newCon").append(`<div id="newDiv_` + deptId + `" class="callout callout-success" style="margin-top: 30px;height: 80px;">
                                    <button type="button"
                                            class="btn btn-danger pull-right" style="margin-top: 9px;"
                                            onclick="removeDiv('` + deptId + `','` + deptName + `');">删除
                                    </button>
                                    <input name="oldId" type="hidden">
                                    <input name="newId" value="` + deptId + `" type="hidden">
                                    <input id="'flg_` + deptId + `'" name="editFlg" value="2" type="hidden">
                                    <p id="newP_` + deptId + `" style="font-size: 2em;margin-top: 7px;">` + deptName + `(新增)</p>
                                </div>`);
            js.modal.hide("modal-add");
        })

        /** 保存任务变更 */
        $("#btn_commit").click(function () {
            js.modal.confirm("确认保存吗？", function () {
                js.post({
                    url: ctx + "designTask/taskChange/saveChange",
                    data: $("#sheetForm").serialize(),
                    success: function (result) {
                        if (result.type === web_status.SUCCESS) {
                            js.modal.success(result.msg);
                            location.href = ctx + "designTask/taskChange/changePage";
                        } else {
                            js.modal.warning(result.msg);
                        }
                    }
                })
            })
        })

    })
</script>
</body>
</html>
